<template>
    <div class="page">

  <div class="content" ref="myEcharts">
   
  </div>
  <el-radio-group v-model="type" @change="tabCountType" class="radio">
    <el-radio-button  :value="0" label="最近30天"></el-radio-button >
    <el-radio-button :value="1" label="最近半年"></el-radio-button>
    <el-radio-button :value="2" label="最近一年"></el-radio-button>
  </el-radio-group>
</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import * as echarts from 'echarts';
import { repairslineview,questionslineview } from "../service/homeindex/lineview";
import { CountsList } from "../service/homeindex/type";

const myEcharts = ref();

const type= ref(0)
//类型变换
const tabCountType=()=>{
   switch (type.value) {
      case 0:
          counttype.days=30
          counttype.months=null
          counttype.years=null
          getcounts()
          break;
      case 1:
          counttype.days=null
          counttype.months=6
          counttype.years=null
          getcounts()
          break;
      case 2:
          counttype.days=null
          counttype.months=null
          counttype.years=new Date().getFullYear()
          getcounts()
          break;
      default:
          break;
  }
}
//获取数据
const counttype=reactive<CountsList>({
    days:30,
    months:null,
    years:null
})
//报修统计
const repaircounts = ref<number[]>([])
const xAxis = ref<string[]>([])
//问题统计
const questioncounts = ref<number[]>([])

//获取数据
const getcounts = async()=>{
    let res:any = await repairslineview(counttype)
   
    if (res.errCode==10000) {
        let eresdata:any = res.data.reverse()
        if (type.value==2) {
          eresdata=eresdata.reverse()
        }
        repaircounts.value=eresdata.map((item:any)=>item.counts) as number[]
        xAxis.value=eresdata.map((item:any)=>item.label) as string[]
    }
    let qres:any = await questionslineview(counttype)
    if (qres.errCode==10000) {
      let eresdata:any = qres.data.reverse()
        if (type.value==2) {
          eresdata=eresdata.reverse()
        }
        questioncounts.value=eresdata.map((item:any)=>item.counts)as number[]
    }
    initCharts()
} 
const initCharts = ()=>{
    var myChart = echarts.init(myEcharts.value);
    var option = {
  title: {
    text: '数据展示'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['报修总数', '投诉总数']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data:xAxis.value
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '报修总数',
      type: 'line',
      stack: 'Total',
      data: repaircounts.value
    },
    {
      name: '投诉总数',
      type: 'line',
      stack: 'Total',
      data: questioncounts.value
    }
  ]
};
    option && myChart.setOption(option);
}

onMounted(() => {
    getcounts()
})
</script>

<style lang="less" scoped>
@import url(../assets/home/homelineview.less);
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
